<template>
  <div class="detail-component">
    <div class="tab-left-contain">
      <div
        v-for="(item, index) in detailTitle"
        :key="index"
        :class="activeIndex == index ? 'titleActive' : 'titleCustom'"
        @click="activeIndex = index"
      >
        <svg-icon
          :icon-class="activeIndex == index ? item.activeIcon : item.icon"
          style="font-size: 18px"
        ></svg-icon>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="info-right-contain">
      <el-card>
        <div v-show="activeIndex == 0" class="tab_activeName1">
          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon
            >基本信息
          </div>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label"> 设备ID </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 设备名称 </template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 设备分组 </template>
              苏州市
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 安装位置 </template>
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 备注信息 </template>
              江苏省苏州市吴中区吴中大道 1188 号
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 添加时间 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
          </el-descriptions>

          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon
            >状态信息
          </div>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label"> 开关机 </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 工作模式 </template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 室内温度 </template>
              苏州市
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 外部温度 </template>
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 工作状态 </template>
              江苏省苏州市吴中区吴中大道 1188 号
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 运行风速 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 空调阀 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 地暖阀 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 按键权限 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 童锁 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
          </el-descriptions>

          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon
            >配置信息
          </div>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label"> 联网状态 </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 信号强度 </template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 固件版本</template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label" />
            </el-descriptions-item>
          </el-descriptions>
          <div class="tab_activeName_title">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon
            >高级参数
          </div>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label"> 温升校准值 </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 温升校准温度0 </template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 温升校准温度1 </template>
              苏州市
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 温升校准温度2 </template>
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 温升校准温度3 </template>
              江苏省苏州市吴中区吴中大道 1188 号
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 制热模式设定温度上限 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 制热模式设定温度下限 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 制冷模式设定温度上限 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 制冷模式设定温度下限 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 空调启停容差 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 风机异步功能制热 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 风机异步功能制冷 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 防冻功能 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 阀门防抱死 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 设备上电状态 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 直流电压上限 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 直流电压下限 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 测温方式 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 防冷风保护 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 制热计费阈值 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 制冷计费阀值 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 高速常量 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 中速常量 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 低速常量 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 传感器无人判定时间 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 传感器人存判定距离 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 无人判定后制热模式工作状态 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 无人判定后制冷模式工作状态 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 地面阀门启停容差 </template>
              2020-09-01 10:00:00
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-show="activeIndex == 1" class="tab_activeName2">
          <div class="tab_activeName_title tab_activeName_title_border">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon> 信息修改
          </div>
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            label-width="80px"
            class="form-activeName2"
          >
            <el-form-item label="设备名称:">
              <el-input clearable />
            </el-form-item>
            <el-form-item label="安装位置:">
              <el-input clearable />
            </el-form-item>
            <el-form-item label="备注信息:">
              <el-input clearable />
            </el-form-item>
          </el-form>
          <div style="margin-top: 40px; text-align: center">
            <el-button class="btn-search">确定</el-button>
          </div>
        </div>
        <div v-show="activeIndex == 2" class="tab_activeName3">
         <div class="tab_activeName_title tab_activeName_title_border">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon> 设备日志
          </div>
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eff3f8', color: '#333' }"
            border
            style="width: 100%"
            size="small"
          >
            <el-table-column prop="date" label="操作详情" width="180" />
            <el-table-column prop="name" label="操作时间" width="180" />
            <el-table-column prop="address" label="操作人" />
          </el-table>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <div v-show="activeIndex == 3" class="tab_activeName4">
         <div class="tab_activeName_title tab_activeName_title_border">
            <svg-icon icon-class="title-line" style="font-size: 18px"></svg-icon> 报警记录
          </div>
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eff3f8', color: '#333' }"
            border
            style="width: 100%"
            size="small"
          >
            <el-table-column prop="date" label="报警类别" width="180" />
            <el-table-column prop="name" label="报警时间" />
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "DeviceDetailComponent",
  data() {
    return {
      detailTitle: [
        {
          name: "设备信息",
          icon: "deviceInfoLog063678",
          activeIcon: "deviceInfoLogffffff",
        },
        {
          name: "修改信息",
          icon: "deviceEditLog063678",
          activeIcon: "deviceEditLogffffff",
        },
        {
          name: "设备日志",
          icon: "deviceLog063678",
          activeIcon: "deviceLogffffff",
        },
        {
          name: "报警记录",
          icon: "deviceWarnLog063678",
          activeIcon: "deviceWarnLogffffff",
        },
      ],
      activeIndex: 0,
      ruleForm:{},
      tableData:[],
      currentPage:1,
    };
  },
  props: {
    activeIndexComponent: {
      type: Number,
      default: 0,
    },
  },
  watch: { 
    activeIndexComponent(val){
      this.activeIndex = 0
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

  }
};
</script>
<style scoped lang="scss">
.detail-component {
  display: flex;
}
.tab-left-contain {
  width: 160px;
  height: 100%;
  margin-right: 50px;
  .titleActive,
  .titleCustom {
     display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 5px;
    border-radius: 10px;
    border: 1px solid #063678;
  }
  .titleActive {
    width: 160px;
    background-color: #063678;
    color: #fff;
    line-height: 50px;
    span {
      padding-left: 10px;
    }
  }
  .titleCustom {
    width: 145px;
    color: #063678;
    line-height: 40px;
    background-color: #fff;
    span {
      padding-left: 10px;
    }
  }
}

.info-right-contain {
  width: 860px;
  min-height: 50vh;
  max-height: 70vh;
  overflow: auto;
  .tab_activeName_title {
    font-weight: 700;
    color: #063678;
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
</style>
